import { createStore, applyMiddleware } from 'redux'
import { ReduceAction, State } from '../interfaces/redux'
import reducer from './reducer'

function logger1({ getState }: any) {
  return (next: any) => (action: any) => {
    console.log('1 will dispatch', action)

    // 调用 middleware 链中下一个 middleware 的 dispatch。
    const returnValue = next(action)

    console.log('1 state after dispatch', getState())

    // 一般会是 action 本身，除非
    // 后面的 middleware 修改了它。
    return returnValue
  }
}

function logger2({ getState }: any) {
  return (next: any) => (action: any) => {
    console.log('2 will dispatch', action)

    // 调用 middleware 链中下一个 middleware 的 dispatch。
    const returnValue = next(action)

    console.log('2 state after dispatch', getState())

    // 一般会是 action 本身，除非
    // 后面的 middleware 修改了它。
    return returnValue
  }
}

const store = createStore<State, ReduceAction, unknown, unknown>(
  reducer,
  { n: 10 },
  applyMiddleware(logger1, logger2)
)

export default store
